<template>
    <view class="content" v-if="isShow">
        <view class="title text-lg">基础信息</view>
        <view class="box text-noraml">
            <view class="item">
                <view v-if="type == 3">单号</view>
				<view v-else>采购单号</view>
                <view class="item-r text-bold">{{data.belong}}</view>
            </view>
            <view class="item">
                <view>供货企业</view>
                <view class="item-r text-bold">{{data.company}}</view>
            </view>
            <view class="item">
                <view>供货企业销售人员</view>
                <view class="item-r text-bold">{{data.account}}</view>
            </view>
            <view class="item-img" v-if="data && data.agreement && data.agreement.length > 0">
                <view>供货企业随行同行单</view>
                <view class="item-img-down">
                    <image v-for="(el, ind) in data.agreement" :key="ind" :src="el.value" 
                        class="img" @click="$previewImage(data.agreement, ind)"></image>
                </view>
            </view>
        </view>
        
        <view class="title text-lg">药品信息</view>
        <view class="wrapper">
            <view class="drug text-noraml" v-for="(item, index) in data.goods_list" :key="index">
                <view class="drug-name text-bold">{{item.goods_name}}</view>
                <view class="drug-down-l text-df text-gray">
                    <view class="u-p-t-15" v-if="item.dosage">剂型：{{item.dosage}}</view>
                    <view class="u-p-t-15">规格：{{item.goods_spec}}</view>
                    <view class="u-p-t-15">生产厂家：{{item.factory}}</view>
                    
                    <view class="item">
                        <view>批号</view>
                        <view class="item-r">
                            <input type="text" v-model="item.batch" placeholder="请输入" class="inp">
                        </view>
                    </view>
                    <view class="item">
                        <view>有效期是否到月</view>
                        <view class="item-r">
                            <view class="u-flex u-p-r-50" @click.stop="chooseIsCome(item)">
                                <image :src="item.isCome ? '../../static/icon/choose_01.png' : '../../static/icon/choose_02.png'" class="choose-01"></image>
                                <view>是</view>
                            </view>
                            <view class="u-flex" @click.stop="chooseIsCome(item)">
                                <image :src="!item.isCome ? '../../static/icon/choose_01.png' : '../../static/icon/choose_02.png'" class="choose-01"></image>
                                <view>否</view>
                            </view>
                        </view>
                    </view>
                    <view class="item">
                        <view>生产日期</view>
                        <view class="item-r" @click="openStartTime(item)">
                            <input type="text" v-model="item.produce_date" placeholder="请选择" class="inp" disabled>
                            <image src="../../static/icon/time_02.png" class="time-02"></image>
                        </view>
                    </view>
                    <view class="item">
                        <view>有效日期</view>
                        <view class="item-r" @click="openEndTime(item)">
                            <input type="text" v-model="item.period_date" placeholder="请选择" class="inp" disabled>
                            <image src="../../static/icon/time_02.png" class="time-02"></image>
                        </view>
                    </view>
                    
                    <view class="u-p-t-15">到货数量：{{item.take_nums}}</view>
                    <view class="u-p-t-15">拒收数量：{{item.refund_nums}}</view>
                    <view class="u-p-t-15" v-if="item.refund_reason">拒收原因：{{item.refund_reason}}</view>
                    <view class="u-p-t-15" v-if="item.refund_nums > 0 && item && item.file_ids_array && item.file_ids_array.length > 0">
                        <view>拒收图片</view>
                        <view class="img-box">
                            <image v-for="(img, imgind) in item.file_ids_array" :key="imgind" :src="img.value" 
                                class="up-photo" @click="$previewImage(item.file_ids_array, imgind)"></image>
                        </view>
                    </view>
                </view>
                
                <!-- 待验收 -->
                <template v-if="type == 1 && (order_status == 1 || order_status == 2)">
                    <view class="item border-t">
                        <view>验收数量</view>
                        <view class="item-r">
                            <input type="number" v-model="item.check_nums" placeholder="请输入" class="inp">
                        </view>
                    </view>
                    <view class="examine2 borders-bottom-gray">
                        <view>上传质检单</view>
                        <view class="img-box">
                            <view class="u-rela" v-for="(el, ind) in item.quality" :key="ind">
                                <image :src="el" class="up-photo" @click="$previewImage(item.quality, ind)"></image>
                                <view class="del-img" @click.stop="$delImage(item.quality, item.quality_uri, ind)">删除</view>
                            </view>
                            <image src="../../static/image/up.png" class="up-photo" @click="chooseImage(item, 1)"></image>
                        </view>
                    </view>
                    <view class="item">
                        <view>拒收数量</view>
                        <view class="item-r">
                            <input type="number" v-model="item.refund_nums2" placeholder="请输入" class="inp">
                        </view>
                    </view>
                    <view class="item" v-if="item.refund_nums2 > 0" @click="openRefundReason(item)">
                        <view>拒收原因</view>
                        <view class="item-r">
                            <input type="text" v-model="item.refund_reason2" placeholder="请选择" class="inp" disabled>
                            <u-icon name="arrow-down-fill" color="#a7a7a7" size="28" class="u-m-l-15"></u-icon>
                        </view>
                    </view>
                    <!-- el.refund_nums > 0 && 拒绝原因选择其他时，要输入文字，如不输入 传 其他。 -->
                    <view class="examine2 borders-bottom-gray" v-if="item.refund_nums2 > 0 && item.refund_is_show2 == 1">
                        <view>其他拒收原因</view>
                        <textarea v-model="item.refund_reason_other2" maxlength="-1" :auto-height="true" placeholder="请输入其他拒收原因" class="t-inp"></textarea>
                    </view>
                    <view class="examine2" v-if="item.refund_nums2 > 0">
                        <view>上传拒收图片</view>
                        <view class="img-box">
                            <view class="u-rela" v-for="(file, findex) in item.file_imgs2" :key="findex">
                                <image :src="file" class="up-photo" @click="$previewImage(item.file_imgs2, findex)"></image>
                                <view class="del-img" @click.stop="$delImage(item.file_imgs2, item.file_ids2, findex)">删除</view>
                            </view>
                            <image src="../../static/image/up.png" class="up-photo" @click="chooseImage(item, 2)"></image>
                        </view>
                    </view>
                </template>
            </view>
        </view>
        
        <view class="btn-square u-m-30" v-if="type == 1 && (order_status == 1 || order_status == 2)" @click="$noMultipleClicks(doSubmit)">确认验收</view>
        
        <!-- 拒绝原因 is_show=1是需要录入 0直接选择 -->
        <template v-show="show">
            <u-select v-model="show" mode="single-column" :list="option" value-name="id" label-name="name" @confirm="confirm"></u-select>
        </template>
        
        <!-- 选择时间 -->
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker>
        <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker>
        <u-picker v-model="JStimeShowMonth" mode="time" :params="timeParamsMonth" @confirm="chooseTime(3, $event)"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick: true,//连点
                isShow: false,
                option: [],
                show: false,
                listItem: {},
                
                id: '',
                data: {},
                type: '',//1待验收 2已验收 3拒收
                order_status: '',// order_status = 0未收货 1-已收货,待验收  2-已验收,待二次验收  3-已(二次。有的商品需要二次验收，有的不需要)验收  4-已入库
                KStimeShow: false, //开始时间
                JStimeShow: false, //结束时间
                JStimeShowMonth: false,
                startTime: '', //开始时间
                endTime: '', //结束时间
                timeParams: { year: true, month: true, day: true, hour: false, minute: false, second: false },
                timeParamsMonth: { year: true, month: true, day: false, hour: false, minute: false, second: false },
            };
        },
        onLoad(option) {
            if (option.type == 2) {
                uni.setNavigationBarTitle({
                	title:'已收货'
                })
            }
			if (option.type == 3) {
			    uni.setNavigationBarTitle({
			    	title:'拒收'
			    })
			}
            this.id = option.id
            this.order_status = option.order_status
            this.type = option.type
            this.getData()
            this.getOption()
        },
        methods: {
            // 有效期是否到月，是的时候，有效日期格式是 年-月。
            chooseIsCome(el) {
				if (this.type == 1) {
					el.period_date = ''
					el.isCome = el.isCome == 1 ? 0 : 1
				}
            },
            
            openEndTime(el) {
				if (this.type == 1) {
					this.listItem = el
					if (el.isCome == 1) {
					    this.JStimeShowMonth = true
					} else {
					    this.JStimeShow = true
					}
				}
            },
            
            openStartTime(el) {
				if (this.type == 1) {
					this.listItem = el
					this.KStimeShow = true
				}
            },
            
            //选择时间
            chooseTime(num, e) {
            	if (num == 1) {
                    this.listItem.produce_date = e.year + '-' + e.month + '-' + e.day;
            	}
                if (num == 2) {
                    this.listItem.period_date = e.year + '-' + e.month + '-' + e.day;
            	}
                if (num == 3) {
                    this.listItem.period_date = e.year + '-' + e.month
                }
            },
            
            doSubmit() {
                let isNull = false, isMinus = false, isAgree = false, data = []
                this.data.goods_list.forEach(cur => {
                    if (!cur.check_nums || (cur.refund_nums2 > 0 && !cur.refund_reason_id2) || !cur.batch || !cur.produce_date || !cur.period_date) {
                        isNull = true
                    }
                    // 判断数量是否相等
                    if (cur.total_nums != Number(cur.check_nums) + Number(cur.refund_nums2)) {
                        isAgree = true
                    }
                    // 判断是否为负数
                    if (cur.check_nums < 0 || cur.refund_nums2 < 0) {
                        isMinus = true
                    }
                })
                if (isNull) {
                    this.$toast('您有未填写的内容，请填写完整！')
                    return
                }
                if (isMinus) {
                    this.$toast('数量不可以是负数！')
                    return
                }
                if (isAgree) {
                    this.$toast('验收数量与收获数量不一致！')
                    return
                }
                this.data.goods_list.forEach(cur => {
                    if (!isNull && !isMinus && cur.refund_nums2 > 0 && cur.refund_reason_id2 && cur.refund_is_show2 == 1) {
                        cur.refund_reason2 = cur.refund_reason_other2 ? cur.refund_reason_other2 : '其他'
                    }
                    
                    if (this.order_status == 1) {
                        data.push({
                            goods_id: cur.goods_id,//商品编号
                            check_nums: cur.check_nums,//验收数量
                            quality_uri: cur.quality_uri,//质检单图片编号
                            take_goods_id: cur.id,//收货单商品编号
                            refund_nums: cur.refund_nums2,//拒收数量
                            refund_reason_id: cur.refund_nums2 > 0 ? cur.refund_reason_id2 : '',//拒收原因编号
                            refund_reason: cur.refund_nums2 > 0 ? cur.refund_reason2 : '',//拒收原因
                            file_ids: cur.refund_nums2 > 0 ? cur.file_ids2 : '',//拒收图片编号
                            batch: cur.batch, //批号
                            produce_date: cur.produce_date, //生产日期
                            period_date: cur.period_date, //有效日期
                        })
                    }
                    if (this.order_status == 2) {
                        data.push({
                            check_goods_id: cur.id,//验收商品编号
                            second_check_nums: cur.check_nums,//二次验收拒收数量
                            second_quality_uri: cur.quality_uri,//二次验收质检单
                            second_refund_nums: cur.refund_nums2,//拒收数量
                            second_refund_reason_id: cur.refund_nums2 > 0 ? cur.refund_reason_id2 : '',//二次验收拒收原因编号
                            second_refund_reason: cur.refund_nums2 > 0 ? cur.refund_reason2 : '',//二次验收拒收原因
                            second_file_ids: cur.refund_nums2 > 0 ? cur.file_ids2 : '',//二次验收拒收图片
                            batch: cur.batch, //批号
                            produce_date: cur.produce_date, //生产日期
                            period_date: cur.period_date, //有效日期
                        })
                    }
                })
                console.log(data)
                
                let url = '', promise = {}
                if (this.order_status == 1) {
                    // 验收
                    url = 'inventory_put/check'
                    promise = {
                        userToken: this.$getSync('userToken'),
                        id: this.id,
                        take_array: data,
                    }
                } else if (this.order_status == 2) {
                    // 二次验收
                    url = 'inventory_put/second'
                    promise = {
                        userToken: this.$getSync('userToken'),
                        id: this.id,
                        check_array: data,
                    }
                }
                
                this.$ajax(url, promise).then(ret => {
                	if (ret.status == 0) {
                        this.$toast('提交成功')
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                	} else {
                		this.$toast(ret.message);
                	}
                });
            },
            
            getData() {
                let url = ''
                if (this.order_status == 1) {
                    url = 'inventory_put/take_detail'
                } else if (this.order_status == 2 || this.order_status == 3) {
                    url = 'inventory_put/second_detail'
                }
            	this.$ajax(url, {
                    userToken: this.$getSync('userToken'),
                    id: this.id, //收货订单编号
                }).then(ret => {
            		if (ret.status == 0) {
                        this.data = ret.data
                        if (this.data&&this.data.goods_list&&this.data.goods_list.length > 0) {
                            this.data.goods_list.forEach(cur => {
                                let len = cur.period_date.length
                                if (len == 10) {
                                    this.$set(cur, 'isCome', 0) //有效期是否到月
                                } else {
                                    this.$set(cur, 'isCome', 1) //有效期是否到月
                                }
                                
                                this.$set(cur, 'total_nums', Number(cur.take_nums) + Number(cur.refund_nums)) //总数量
                                this.$set(cur, 'check_nums', '') //验收数量
                                this.$set(cur, 'quality_uri', []) //质检单图片编号
                                this.$set(cur, 'quality', []) //质检单图片 
                                this.$set(cur, 'take_goods_id', cur.id) //收货单商品编号
                                this.$set(cur, 'refund_nums2', '') //拒收数量
                                this.$set(cur, 'refund_reason_id2', '') //拒收原因编号
                                this.$set(cur, 'refund_is_show2', 0) //拒收原因 是否需要输入
                                this.$set(cur, 'refund_reason2', '') //拒收原因
                                this.$set(cur, 'refund_reason_other2', '') //拒收原因 输入
                                this.$set(cur, 'file_ids2', []) //拒收图片编号
                                this.$set(cur, 'file_imgs2', []) //拒收图片
                            })
                        }
                        
                        this.isShow = true
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            openRefundReason(el) {
                this.listItem = el
                this.show = true
            },
            
            confirm(e) {
                console.log(e);
                this.listItem.refund_reason2 = e[0].label
                this.listItem.refund_reason_id2 = e[0].value
                this.option.forEach(cur => {
                    if (cur.id == e[0].value) {
                        this.listItem.refund_is_show2 = cur.is_show
                    }
                })
            },
            
            // 获取拒绝原因
            getOption() {
                this.$ajax('inventory_put/get_reason', {
                    userToken: this.$getSync('userToken'),
                    type: 1,
                }).then(ret => {
                	if (ret.status == 0) {
                        this.option = ret.data
                	} else {
                		this.$toast(ret.message);
                	}
                });
            },
            
            chooseImage(item, num) {
				let sourceType = []
				if (num == 1) {
					sourceType = ['camera']
				} else {
					sourceType = ['album', 'camera']
				}
                uni.chooseImage({
                    count: 9, //默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: sourceType, // 相机拍照 album 相册、camera 拍照
                    success: (res) => {
                        const tempFilePaths = res.tempFilePaths;
                        for (let i = 0; i < tempFilePaths.length; i++) {
                            this.$upLoadPic(res.tempFilePaths[i]).then(ret => {
                                console.log(ret)
                                if (num == 1) {
                                    // 质检单
                                    item.quality_uri.push({value: ret.data.id})
                                    item.quality.push(ret.data.attach_uri)
                                } else if (num == 2) {
                                    // 拒绝原因图
                                    item.file_ids2.push({value: ret.data.id})
                                    item.file_imgs2.push(ret.data.attach_uri)
                                }
                            });
                        }
                    }
                });
            },
        }
    };
</script>


<style lang="scss">
    page{
        background-color: #f5f5f5 !important;
    }
    
    .wrapper{
        padding: 0 30rpx;
    }
    .choose-01{
        width: 33rpx;
        height: 33rpx;
        margin-right: 15rpx;
    }
    .time-02{
        width: 33rpx;
        height: 34rpx;
        margin-left: 15rpx;
    }
    
    
    .title{
        font-weight: bold;
        padding: 45rpx 50rpx 25rpx;
        position: relative;
    }
    .title::after{
        display: block;
        content: '';
        width: 8rpx;
        height: 26rpx;
        background-color: #ff4800;
        position: absolute;
        left: 25rpx;
        bottom: 32rpx;
    }
    
    
    .box{
        padding: 0 30rpx;
        background-color: #fff;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .item:last-child{
        border-bottom: none;
    }
    .item-r{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
        text-align: right;
        padding-left: 20rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .item-img{
        padding: 30rpx 0;
    }
    .item-img-down{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .img{
        width: 316rpx;
        height: 200rpx;
        border-radius: 10rpx;
        margin-top: 20rpx;
        margin-right: 20rpx;
    }
    .img:nth-child(2n) {
        margin-right: 0;
    }
    
    
    .drug{
        background-color: #fff;
        border-radius: 15rpx;
        padding: 35rpx 20rpx 0;
        margin-bottom: 25rpx;
    }
    .drug:last-child{
        margin-bottom: 0;
    }
    .drug-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .drug-name{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }
    .drug-state1{
        font-size: 24rpx;
        color: #0075ff;
        padding: 9rpx 12rpx;
        background-color: #ebf4fe;
        border-radius: 8rpx;
        margin-left: 20rpx;
    }
    .drug-state2{
        font-size: 24rpx;
        color: #00c28f;
        padding: 9rpx 12rpx;
        background-color: #e9fbf6;
        border-radius: 8rpx;
        margin-left: 20rpx;
    }
    .drug-down{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .border-t{
        border-top: 2rpx solid #e6e6e6;
    }
    .drug-down-l{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
        padding-bottom: 30rpx;
    }
    .drug-btn{
        color: #fff;
        padding: 17rpx 43rpx;
        background-color: #ff4800;
        border-radius: 8rpx;
        margin-left: 20rpx;
    }
    
    
    .examine{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .examine:last-child{
        border-bottom: none;
    }
    .examine-l{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
        padding-right: 20rpx;
    }
    .t-inp{
        width: 100%;
        min-height: 150rpx;
        height: auto;
        padding-top: 15rpx;
    }
    .examine2{
        padding: 30rpx 0;
    }
    .img-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .up-photo{
        width: 187rpx;
        height: 187rpx;
        margin-right: 15rpx;
        margin-top: 15rpx;
    }
    
    
    .btns{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30rpx;
    }
    .refuse-btn{
        font-size: 34rpx;
        color: #757575;
        padding: 25rpx 130rpx;
        background-color: #fff;
        border: 2rpx solid #d8d8d8;
        border-radius: 10rpx;
    }
    .take-btn{
        font-size: 34rpx;
        color: #fff;
        padding: 25rpx 130rpx;
        background-color: #ff4800;
        border-radius: 10rpx;
        margin-left: 20rpx;
    }

</style>
